<template>
  <view class="box">
	 <!-- <text class="act-tip" @click="descVisible=true">活动说明</text> -->
	 <image class="act-tip" src="../../static/goldenegg/fd.jpg" mode="aspectFit" @click="descVisible=true"></image>
	 <image class="egg-bg" :src="baseUrl+actInfo.eggsImg" mode="aspectFill"></image>
	<!-- 砸蛋 -->
	<act-goldenegg :eggsId="eggsId" @click="doLottery"></act-goldenegg>
	<!-- 活动说明 -->
	<view class="act-desc" v-if="descVisible">
		<view class="f-column">
			<view class="nav f-row f-m-between">
				<text class="nav-title">活动说明</text>
				<!-- <text @click="descVisible=false">x</text> -->
				<image class="close-img" src="../../static/img/close.png" mode="aspectFill" @click="descVisible=false"></image>
			</view>
			<view class="part f-column f-c-start">
				<text class="title">活动时间</text>
				<text class="info">{{actInfo.startTime}} 到 {{actInfo.endTime}} </text>
			</view>
			<view class="part f-column f-c-start">
				<text class="title">活动规则</text>
				<text class="info">凡在活动期间登陆商城的用户，砸蛋活动规则如下:</text>
				<text class="info">1.砸蛋中奖率为100%</text>
				<text class="info">2.每人每天仅限砸蛋两次</text>
			</view>
			<view class="part f-column f-c-start">
				<text class="title">活动奖品</text>
				<text class="info">每位用户所获得的砸蛋奖品，将随机分配为商城正装产品或优惠券</text>
				<text class="info">100%中奖，奖品仅活动期间有效</text>
			</view>
		</view>
	</view>
	<!-- 弹出 券 -->
	<view class="prize-pop f-column f-m-center f-c-center" v-if="lotteryResultVisible">
			<view class="f-column f-c-center prize-box" @tap="receivePrize" >
				<image class="prize-bg" src="../../static/goldenegg/prize-bg.png" mode="aspectFit"></image>
				<image class="prize-img" :src="baseUrl+prizeInfo.prizeImg" mode="aspectFill"></image>
				<!-- <text class="prize-name">{{prizeInfo.prizeName}}</text> -->
				<image class="close-img" src="../../static/img/close.png" mode="aspectFill" @tap.stop="lotteryResultVisible=false"></image>
			</view>
	</view>
	<tui-modal :show="modalShow" @click="handleClick" title="提示" :button="buttonArray" :content="modalContent"></tui-modal>
	<auto-receive-coupon :show.sync="quanVisible" :idList="couponList" :flag="2" ></auto-receive-coupon>
	<tui-modal></tui-modal>
	<loading></loading>
  </view>
  
  
</template>

<script>
import actGoldenegg from '@/packageE/components/act-goldenegg/act-goldenegg'
// import autoReceiveCoupon from '../../../components/autoReceiveCoupon/autoReceiveCoupon.vue'
import autoReceiveCoupon from '@/components/autoReceiveCoupon/autoReceiveCoupon.vue'
export default {
  data () {
    return {
		// idList:[{couponId:"3ca0fccd635da1e9b0e07c57922e1043"}],
		couponList:[],
		eggsId:'',
		lotteryResultVisible:false,
		quanVisible:false,
		descVisible:false,
		actInfo:{},
		prizeInfo:{},
		buttonArray:[
			{
			  text: "确定",
			  type: "primary",
			  plain: false
			}
		], 
		modalShow:false,
		modalContent:'您没有权限参与该活动',
		baseUrl:this.$store.state.imgUrl,
		address:{},
		prizeAttributeList: [
		        { label: '创建商品', value: 0 },
		        { label: '商品', value: 1 },
		        { label: '优惠券', value: 2 }
		      ],
			  // quan:{couponId: "3ca0fccd635da1e9b0e07c57922e1043"
					// couponLimit: 1
					// couponName: "全场1减0.1元 坤"
					// couponPrice: 0.1
					// eggsId: "a2328f7503b59cb86c08ef608d501358"
					// eggsPrizeId: "9178e9365a41dd3310ed105ac418562e"
					// prizeAttribute: 2
					// prizeDate: "2021-04-13 00:00:00 至 2021-04-30 00:00:00"
					// prizeImg: ""
					// prizeName: "全场1减0.1元 坤"
					// prizeNumber: 20
					// prizeTypeName: ""
					// productName: null
					// specificationId: null
					// specificationName: null,
					// }
    }
  },
  components: {
	actGoldenegg,
	autoReceiveCoupon
  },
  onLoad(option) {
	  this.eggsId = option.eggsId
	  // #ifdef H5
	  this.$wechat.noShare()
	  // #endif
	  
	  
  },
  onShow(e){
	  this.loadData(this.eggsId)
   },
  created(){
	
  },
  mounted () {

  },
  destroyed () {

  },
  methods: {
	  loadData(ID) {
	  	this.$http.getGoldeneggDetail(ID).then((res) => {
	  		if(res.status === 0) {
				let data = res.data
				let useFlag = data.useFlag // 0 1 2 
				let orgLv = uni.getStorageSync('orgLv') // gk jxs ... ...
				if(useFlag===0||(useFlag===1&&orgLv==='gk')||(useFlag===2&&orgLv!=='gk')){
					this.actInfo = res.data
				}else{
					this.modalShow = true;
				}
	  		}
	  	})
	  				
	  },
	  handleClick(){
		  uni.navigateBack({
		  	
		  })
	  },
	  doLottery(item,index,res){
		  console.log('doLottery 中奖了',index,res);
		  // this.quanVisible = true 
		  // this.couponList[0]='3ca0fccd635da1e9b0e07c57922e1043'
		  if(res){
			 this.prizeInfo = res
			 // this.$refs.popup.open()
			 if(this.prizeInfo.prizeAttribute===2){
				 this.couponList = []
				 this.$nextTick(function(){
				 	this.couponList.push({
						couponPrice:this.prizeInfo.couponPrice,
						couponType:this.prizeInfo.couponType,
						couponLimit:this.prizeInfo.couponLimit,
						couponStart:this.prizeInfo.couponStart,
						couponEnd:this.prizeInfo.couponEnd,
					}) 
				 })
				
				this.quanVisible = true
			 }else if(this.prizeInfo.prizeAttribute===0||this.prizeInfo.prizeAttribute===1){
				this.lotteryResultVisible = true 
			 }
			 
		  }
	  },
	  receivePrize(){
		  console.log("领奖......")
		  
		  if(this.prizeInfo.prizeAttribute===2){
			  // uni.showToast({
			  // 	title:""
			  // })
			  this.lotteryResultVisible = false
		  }else{
			 uni.navigateTo({
			 	url:"receivingAddress?prizeId="+this.prizeInfo.id
			 }) 
		  }
		  
	  },
	  showTip(){
		  
	  },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" scoped>
	.prize-pop{
		position: fixed;
		top:  0rpx;
		right: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.8);
		color: #fff;
		padding: 20rpx;
		z-index: 2;
		// width: 60vw;
		
		.prize-box{
			position: relative;
			width: 450rpx;
			height: 600rpx;
			border-radius: 20rpx;
			.prize-bg{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 450rpx;
				height: 600rpx;
			}
			.prize-img{
				position: absolute;
				top: 260rpx;
				left: 110rpx;
				width: 260rpx;
				height: 260rpx;
				border-radius: 20rpx;
			}
			.prize-name{
				color: #464646;
			}
			.close-img{
				position: absolute;
				top:  -40rpx;
				right: -40rpx;
				// left: 0rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
		.btn{
			// margin-top: 20rpx;
			padding: 10rpx ;
			border-radius: 20rpx;
			background-color: #ddc93e;
			color: #ff0000;
		}
	}
	.f-row{
		/* #ifndef APP-PLUS-NVUE */
		display:flex;
		/* #endif */
		flex-direction:row;
	}
	.f-column{
		/* #ifndef APP-PLUS-NVUE */
		display:flex;
		/* #endif */
		flex-direction:column;
	}
	.f-m-between{
		justify-content: space-between;
	}
	.f-m-center{
		justify-content: center;
	}
	.f-m-start{
		justify-content: start;
	}
	.f-c-center{
		align-items: center;
	}
	.f-c-stretch{
		align-items: stretch;
	}
	.f-c-start{
		align-items: flex-start;
	}
	 
	.act-desc{
		position: fixed;
		top:  0rpx;
		right: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.8);
		color: #fff;
		padding: 20rpx;
		z-index: 3;
		view{
			margin-top: 40rpx;
			
		}
		.part{
			text{
				line-height: 60rpx;
				// margin-top: 20rpx;
			}
		}
		.title{
			margin-bottom: 10rpx;
			padding: 10rpx;
			color: #a70000;
			font-weight: 600;
			background-color: rgba($color: #eebc0b, $alpha: 1.0);
			border-radius: 10rpx;
		}
	}
	.act-tip{
		position: fixed;
		top: calc(var(--window-top) + 0rpx);
		right: 10rpx;
		font-size: 40rpx;
		color: #ffffff;
		z-index: 1;
		
		width: 125rpx;
		height: 125rpx;
	}
	
	.egg-bg{
		  // background-image: url(../../static/goldenegg/egg-bg.png);
		  position: fixed;
		  top: var(--window-top) ;
		  left: 0rpx;
		  right: 0rpx;
		  width: 100%;
		  height: 100%;
		  z-index: -1;
	}
	
	.pop-counpon{
		
	}
	.close-img{
		width: 40rpx;
		height: 40rpx;
	}
</style>
